import React from "react";
import './Flower.css';

import { Component } from 'react'

class Flowers extends Component {

    state = { list: [], collectList: [] };
    componentDidMount() {
        fetch('https://www.fastmock.site/mock/3c02a69b3952632e311022710cb48a6c/plant/getPlants')
            .then(res => res.json())
            .then(res => {
                this.setState({ list: res.result.plantList });
                this.state.list.forEach((value) => {
                    value['isCollect'] = false
                })
            })
    }
    cancleCollect = (flower) => {
        const {collectList,list} = this.state;
        this.setState({
            list: list.map((item) => flower.plantID === item.plantID ? { ...item, isCollect: false } : item),
            collectList:  collectList.filter((item) => item.plantID !== flower.plantID)
        });
    }
    collect = (flower) => {
        if (flower.isCollect) {
            alert('您已收藏');
        } else {
            const {collectList,list} = this.state;
            this.setState({
                list: list.map( item => item.plantID === flower.plantID ? { ...item, isCollect: true } : item),
                collectList: [flower,...collectList]
            });
        }
    }
    render() {
        return (
            <div>

                <div>
                    <h1>收藏列表</h1>
                    <ol id="collectList">
                        {
                            this.state.collectList.map((item) => {
                                return <li key={item.plantID}>
                                    <span id='special'>{item.name}</span>
                                    <button onClick={() => this.cancleCollect(item)}>取消收藏</button>
                                </li>
                            })
                        }
                    </ol>
                </div>
                <div>
                    <h1>鲜花列表</h1>
                    <ol className="list">
                        {
                            this.state.list.map((item, index) => {
                                const area = item.area !== '' ? item.area : "未知产地"
                                const isCol = item.isCollect === true ? '已收藏' : '收藏'
                                return <li key={item.coverURL}>
                                    <div className="div">
                                        <img src={item.coverURL} />
                                        <div>{item.name}</div>
                                        <div>{item.engName}</div>
                                        <div>产地：{area}</div>
                                        <button onClick={
                                            () => this.collect(item, index)
                                        }>{isCol}</button>
                                    </div>

                                </li>
                            })
                        }
                    </ol>
                </div>

            </div>
        )
    }
}
export default Flowers